<!-- 设备基本信息 -->
<template>
     <div class="d-flex w-100 h-100">
        <div style="width: 80%;height: 100%;">
            <div
      id="glsbjbxx"
      class="w-100 "
      style="height: 90%; position: relative"
    ></div>  
        </div>
  
   <div style="width:20%;height: 100%;" >
    <fakeLenfend
       style="width:100%;height: 90%;"
        :color="['#99D3F3','#007AFF','#2acf81','#1F9AA7']"
        :text="['在线','离线','告警','待维修']"
        :orient="'column'"
        >
     </fakeLenfend>
   </div>
    </div>
     
</template>
    
<script setup lang='ts'>
import * as echarts from "echarts";
import fakeLenfend from '@/components/project/fakeLegend.vue'
import { useConvert } from '@/hook/useConvert'
let option = useConvert().getPie3D(
   [
      {
         name: '在线',
         value: 12,
         itemStyle: {
            color: '#99D3F3',
         },
      },
      {
         name: '离线',
         value: 37,
         itemStyle: {
            color: '#007AFF',
         },
      },
      {
         name: '告警',
         value: 35,
         itemStyle: {
            color: '#2acf81',
         },
      },
      {
         name: '待维修',
         value: 14,
         itemStyle: {
            color: '#1F9AA7',
         },
      },
      
   ],
   0.7,100
);
onMounted(() => {
  let myChart = echarts.init(
    document.getElementById("glsbjbxx") as HTMLElement
  );

  myChart.setOption(option);
});
</script>



    
<style>
    
</style>